<template>
  <div class="lists">
    <ul>
      <li v-for="item in items" :key="item.id">
        <router-link :to="`/detail/${item.id}`">{{ item.value }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import Mock from 'mockjs'
import cache from '@/mixins/cache.js'
import scroll from '@/mixins/scroll.js'
export default {
  name: 'List',
  mixins: [cache(['Detail']), scroll],
  data() {
    return {
      items: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      const items = []
      for (let i = 0; i < 100; i++) {
        items.push({
          id: i,
          value: Mock.Random.sentence(5, 10),
        })
      }
      this.items = items
    },
  },
}
</script>
<style scoped>
.lists {
  text-align: left;
  line-height: 30px;
}
</style>
